//导入axios
import axios from 'axios';

//使用useEffect和useState
import React, { useEffect, useState } from 'react';

import '../Home/Home.css';

export default function Index() {
    const [dataZero, setDataZero] = useState(null); // 左侧医院排班表
    const [data, setData] = useState(null); // 右侧科室排队情况
    const [dataOth, setDataOth] = useState([]); // 右侧科室当班主任情况
    const [dataTwo, setDataTwo] = useState([]); // 右侧科室排队情况

    useEffect(() => {
        const fetchData = async () => {
            try {
                //左侧医院排班表
                const responseZero = await axios.get('http://www.bingo1440.top:21001/infomationcenter/dayline');
                setDataZero(responseZero.data.data); // 将API响应数据存储到state中
                console.log(responseZero.data.data);

                //右侧科室排队情况
                const response = await axios.get('http://8.148.7.123:8000/infomationcenter/departmentline');
                setData(response.data); // 将API响应数据存储到state中
                //console.log(response.data);

                //右侧科室的当班主任情况
                const responseOth = await axios.get('http://8.148.7.123:8000/infomationcenter/departmentline');
                setDataOth(item => [...item, ...responseOth.data.data])

                //右侧科室公告
                const responseTwo = await axios.get('http://8.148.7.123:8000/infomationcenter/news');
                setDataTwo(item => [...item, ...responseTwo.data.data]); // 将API响应数据存储到state中
                //console.log(responseTwo.data);

            } catch (error) {
                console.error('Error fetching data: ', error);
            }
        };

        fetchData();
    }, []); // 空依赖数组确保仅在组件加载时运行

    return (
        <>
            <div className='father_box'>
                <div className='left_box'>
                    {/* 左侧盒子1 */}
                    <div className="left_box_one">
                        {/* 左侧排班医生名字盒子 */}
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_one'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[0]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[0]?.purview}-今日当班</div>}
                            </div>
                        </div>
                    </div>
                    {/* 左侧盒子2 */}
                    <div className="left_box_two">
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_two'>
                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[1]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[1]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_two'>
                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[1]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[1]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_two'>
                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[1]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[1]?.purview}-今日当班</div>}
                            </div>
                        </div>
                    </div>
                    {/* 左侧盒子3 */}
                    <div className="left_box_three">
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_three'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[2]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[2]?.purview}-今日当班</div>}
                            </div>
                        </div>
                        <div className="left_box_son">
                            <div className="left_box_son_top">
                                <div className='left_box_son_top_avater_three'>

                                </div>
                                <div className='left_box_son_top_name'>
                                    {data && <div className='left_box_son_top_name_wordTop'>{dataZero[2]?.name}</div>}
                                    <div className='left_box_son_top_name_wordBottom'>工号:CNo101</div>
                                </div>
                            </div>
                            <div className="left_box_son_bottom">
                                {data && <div className="left_box_son_bottom_status">{dataZero[2]?.purview}-今日当班</div>}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="right_box">
                    {/* 右侧盒子1 */}
                    <div className='right_box_oneSon'>
                        <h4 className='right_box_title'>当前科室排队情况</h4>
                        <div className='right_box_oneSon_box'>
                            <div className='right_box_oneSon_box_son'>
                                <div className='right_box_oneSon_box_son_sonBox'>
                                    {data && <div className='box_left'>&emsp;{data.data[0].waitnum}</div>}
                                    {data && <div className='box_right'>{data.data[0].name}&emsp;</div>}
                                </div>
                                <div className='right_box_oneSon_box_son_sonBox'>
                                    {data && <div className='box_left'>&emsp;{data.data[1].waitnum}</div>}
                                    {data && <div className='box_right'>{data.data[1].name}&emsp;</div>}
                                </div>
                            </div>
                            <div className='right_box_oneSon_box_son'>
                                <div className='right_box_oneSon_box_son_sonBox'>
                                    {data && <div className='box_left'>&emsp;{data.data[2].waitnum}</div>}
                                    {data && <div className='box_right'>{data.data[2].name}&emsp;</div>}
                                </div>
                                <div className='right_box_oneSon_box_son_sonBox'>
                                    {data && <div className='box_left'>&emsp;{data.data[3].waitnum}</div>}
                                    {data && <div className='box_right'>{data.data[3].name}&emsp;</div>}
                                </div>
                            </div>
                            <div className='right_box_oneSon_box_son'>
                                <div className='right_box_oneSon_box_son_sonBox sonThree'>
                                    {data && <div className='box_left'>&emsp;{data.data[4].waitnum}</div>}
                                    {data && <div className='box_right'>{data.data[4].name}&emsp;</div>}
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 右侧盒子2 */}
                    <div className='right_box_twoSon'>
                        <h4 className='right_box_title'>当班主任</h4>
                        <div className='right_box_twoSon_out_box'>
                            {dataOth.length > 0 ? dataOth.map((item, index) => (
                                <div key={index} className='right_box_twoSon_out_box_box'>
                                    <div className='right_box_twoSon_out_box_box_son'>
                                        <div className='twoSon_name'>&emsp;{item.maindoctor}</div>
                                        <div className='twoSon_number'>DR-001&emsp;</div>
                                    </div>
                                </div>
                            )) : <div className='no_status'>无数据</div>}
                        </div>
                    </div>
                    <div className='right_box_threeSon'>
                        <h4 className='right_box_title'>医院公告</h4>
                        {/* {dataTwo && <div>{dataTwo.data[0].date}</div>} */}
                        {dataTwo.length > 0 ? dataTwo.map((item, index) => (
                            <div key={index} className='right_box_threeSon_out_box'>
                                <div className='right_box_threeSon_out_box_d1'>
                                    <div className='d1_img'></div>
                                    <div>&emsp;{item.title}</div>
                                </div>
                                <div className='right_box_threeSon_out_box_d2'>{item.date}</div>
                            </div>
                        )) : <div className='no_status'>无公告</div>}
                    </div>
                </div>
            </div>
        </>
    )
}